<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>

<body>
    <!-- 混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 -->
    <div id="databinding"></div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#databinding',
            data: {},
            methods: {},
        });
        // 定义一个混入对象
        var myMixin = {
            created: function() {
                this.startmixin()
            },
            methods: {
                startmixin: function() {
                    document.write("欢迎来到混入实例");
                }
            }
        };
        var Component = Vue.extend({
            mixins: [myMixin]
        })
        var component = new Component();
        // 混入的规则：
        // 1.数据对象进行合并，其中的基本数据类型在和组件的数据发生冲突时以组件数据优先，组件中的数据会覆盖混入对象的数据。
        // 2. 数据对象中如果有引用数据类型， 引用数据类型会进行深参差的递归合并。
        // 3. 生命周期钩子函数混合为一个数组， 当使用组件时， 组件的函数和混和的函数都执行， 混入中的函数会先执行， 组件的函数后执行。
        // 4. 值为对象的选项， 例如 methods、 components 和 directives， 将被合并为同一个对象。 两个对象键名冲突时， 取组件对象的键值对。
    </script>
</body>

</html>